<template>
	<view class="container" :style="isOther?'padding-bottom: 150rpx;':'padding-bottom: 30rpx;'">
		<!-- 圆圈按钮 -->
		<view class="content">
			<view v-if="useData" class="partCard u-m-t-32">
				<view class="card-box" ref="element">
					<view class="u-flex u-row-right" style="margin: 20rpx;">
						<u-icon v-if="useState.isMyFriend && !useState.inMyList && isOther" name="more-dot-fill" size="26" @click="showMask = true"></u-icon>
					</view>
					<view v-if="!expandClose" class="logo-box2">
						<u-image v-if="useData.homepageCode" class="logo-img" width="150rpx" height="150rpx" :lazyLoad="true" @click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode])" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode" style="width: 150rpx;height: 150rpx;"></u-image>
					</view>
					<view class="card-line"></view>
					<view class="ctop-box">
						<view class="ctop-info">
							<text class="huFamily">{{useData.realName || useData.usrName}}</text>
							<text class="ctop-info-text2" v-if="useData.posts">{{useData.posts}}</text>
						</view>
						<text class="tip-comp pingFamily" v-if="acComp">{{acComp}}</text>
					</view>
					<view class="c-bom">
						<view v-if="useData.contactNumber" class="c-bom-phone monMontserrat" @click="callPeo()">
							{{useData.contactNumber}}
						</view>
						<view v-if="useData.email" class="c-bom-email monMontserrat">
							<view class="icImag">
								<image src="https://job.ydylmold.cn/mingpian/image/comIndex/xingxi.png">
								</image>
							</view>
							<text>{{useData.email}}</text>
						</view>
						<view v-if="expandClose">
							<view v-if="useData.contactNumber" class="c-bom-email pingFamily">
								<view class="icImag">
									<image src="https://job.ydylmold.cn/mingpian/image/me/xiaoxi.png"></image>
								</view>
								<text @click="leftCilckBtn">{{useData.contactNumber}}</text>
							</view>
							<view style="width: 500rpx;" v-if=" (useData.address ||useData.moreAddr) " class="c-bom-email pingFamily">
								<view class="icImag">
									<image src="https://job.ydylmold.cn/mingpian/image/me/dingwei2.png"></image>
								</view>
								<text style="white-space: normal;">{{useData.address}} {{useData.moreAddr}}</text>
							</view>
							<!-- 简介 -->
							<view v-if="useData.remarks " style="white-space:normal; width: 576rpx;line-height: 35rpx; " class="c-bom-email">
								<view class="icImag">
									<image src="https://job.ydylmold.cn/mingpian/image/me/jianjie.png"></image>
								</view>
								<text>{{useData.remarks || '用户还没有简介哦'}}</text>
							</view>
							<view class="bootmText"> —— XINGMAIMINGPIAN —— </view>
							<view class="bootmCode">
								<u-image class="logo-img" width="220rpx" height="220rpx" :lazyLoad="true" @click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode])" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode" style="width: 140rpx;height: 140rpx;"></u-image>
							</view>
						</view>
						<view @click="expandClose = !expandClose" class="openText pingFamily">
							{{expandClose?'收起':'个人信息'}}
							<image v-if="!expandClose" src="https://job.ydylmold.cn/mingpian/image/comIndex/shouqi.png"></image>
							<image v-else src="https://job.ydylmold.cn/mingpian/image/comIndex/zhankai.png">
							</image>
						</view>
					</view>
					<view class="logo-box">
						<u-image v-if="useData.headImg" class="logo-img" width="100rpx" height="100rpx" radius="50%" :lazyLoad="true" @click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg])" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg">
						</u-image>
					</view>
				</view>
			</view>
			<!-- 发名片按钮 -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="sendCard pingFamily u-flex u-row-center b-r-50 u-font-36 u-weight-700" @click="toUrl('',1)">发名片
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-flex" style="width: 100%;">
				<button class="sendCard2 pingFamily u-flex u-row-center b-r-50 u-font-36 u-weight-700" open-type="share">发名片 </button>
				<button style="border: 2rpx solid #1DA9FE; background-color: #FFFFFF;color: #1DA9FE;" class="u-m-l-20 sendCard2 pingFamily u-flex u-row-center b-r-50 u-font-36 u-weight-700" @click="toUrl('',1)">名片海报 </button>
			</view>
			<!-- #endif -->
			<!-- 名片数据 -->
			<my-data></my-data>
			<!-- 推荐文章 -->
			<view class="part5">
				<view class="part5-top">
					<text class="page-title">推荐文章</text>
					<view class="u-flex u-font-24 u-weight-500" @click="toMoreNews">
						<text>查看更多</text>
					</view>
				</view>
				<view class="part5-list u-m-t-38">
					<view class="part5-item u-p-y-30 u-p-x-20 b-r-32" @click="newClick(item)" v-for="(item,index) in newsList" :key="index">
						<view class="part5-info">
							<text class="info-title">{{item.title}}</text>
							<view class="bom-box u-flex u-row-between">
								<view>
									<image style="width: 24rpx;height: 24rpx;" src="https://job.ydylmold.cn/mingpian/image/comIndex/shizhong.png"></image>
									<text class="u-m-l-16">
										{{$u.timeFormat(new Date(item.createDate || Date.now()),'yyyy/mm/dd')}}
									</text>
								</view>
								<view>
									<image style="width: 32rpx;height: 18rpx;" src="https://job.ydylmold.cn/mingpian/image/comIndex/yanjing.png"></image>
									<text class="u-m-l-16">
										{{item.brows}}/次 </text>
								</view>
							</view>
						</view>
						<image class="part5-img " width="160rpx" height="120rpx" radius="16rpx" :lazyLoad="true" :src="'https://www.ydylmold.cn/images/ydyladmin/portalNews/coverImage/'+(item.imgTitle && item.imgTitle.split(',') && item.imgTitle.split(',')[0])" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<my-button :useNum="craftsmanId" :acPhone="useData.contactNumber" :isShare="isShare" :isOther="isOther"></my-button>
		<u-action-sheet @select="selectItem" @close="showMask = false" :actions="stateList" :title="title" :show="showMask">
		</u-action-sheet>
		<my-auth-modal></my-auth-modal>
	</view>
	</view>
</template>
<script>
	import {
		timeDifference
	} from '@/utils/formaterTime.js'
	import {
		queryEnterpriseContact,
		queryPicList,
		queryNewForSlef,
	} from '@/common/api/auth.js'
	import {
		getToken,
		setToken
	} from '@/utils/token.js'
	import {
		callPeople
	} from '@/utils/common.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		props: ['useId', 'isShare', 'isOther'],
		data() {
			return {
				expandClose: false,
				currSwiper: 0,
				autoplay: true,
				newsList: [], //公司新闻
				swipList: [], //轮播图
				useData: {}, //个人信息
				compData: {}, //企业信息
				acComp: '',
				acCompList: [],
				craftsmanId: getToken('useNum'),
				// isOther: false,
				title: '更多操作',
				showMask: false,
				version: getToken('version'),
				windowUrl: getToken('windowUrl'),
			}
		},
		computed: {
			...mapGetters(['useState', 'isFresh', 'stateList']),
		},
		created: function() {
			if (this.useId) {
				this.craftsmanId = this.useId
			} else {
				this.craftsmanId = getToken('useNum')
			}
			this.init()
			this.$store.dispatch('queryBrowerQty', {
				userId: this.craftsmanId
			})
			// if (this.craftsmanId != getToken('userInfo')['craftsmanId']) {
			// 	this.isOther = true
			// 	// 初始化状态
			// 	this.$store.commit('setUseState', {
			// 		key: '',
			// 		obj: {
			// 			isMyFriend: false, //是我的好友
			// 			isObjFriend: false, //是对方的好友
			// 			inMyList: false, //别人在我的黑名单中
			// 			inObjList: false, //我在别人的黑名单中
			// 			isApply: false //是否在申请中
			// 		}
			// 	});
			// 	this.$store.dispatch('friendsStatus', this.craftsmanId)
			// 	//调取请求他人网页api
			// 	this.$store.dispatch('isToOther', {
			// 		userId: this.craftsmanId,
			// 		version: 1
			// 	})
			// } else {
			// 	this.isOther = false
			// 	this.craftsmanId = getToken('useNum')
			// }

		},

		// 触发下拉刷新
		onPullDownRefresh() {
			this.init() //重新加载数据
			// 延迟关闭刷新动画
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			timeDifference,
			newClick(item) {
				if (getToken('isLogin')) {
					if (item.from == 'portal') {
						this.toUrl(`/pages/newsPart/index/newsDetail?newsId=${item.id}`)
					} else {
						this.toUrl(`/pages/indexSub/newDetail?id=${item.id}`)
					}
				}
			},
			toMoreNews() {
				if (getToken('isLogin')) {
					uni.navigateTo({
						url: '/pages/newsPart/index/index'
					})
				}
			},

			selectItem(e) {
				switch (e.name) {
					case '加入黑名单':
						// this.$store.dispatch('usrBlackListInsert', this.craftsmanId)
						break
					case '删除好友':
						this.$store.dispatch('delFriends', this.craftsmanId)
						break
				}
			},
			callPeo() {
				callPeople(this.craftsmanId, this.useData.contactNumber, this.isShare)
			},
			previewImg(arr, index, key, head) {
				if (key) {
					arr = arr.map(v => {
						return head ? (head + v[key]) : v[key]
					})
				}
				uni.previewImage({
					current: index || 0,
					urls: arr
				})
			},
			showMap() {
				// #ifdef H5
				uni.navigateTo({
					url: `/pages/comment/webView?url=http://apis.map.qq.com/uri/v1/marker/?marker=coord:${this.useData.lat},${this.useData.lng};title:${this.useData.moreAddr};addr:${this.useData.moreAddr}&referer=myapp&key=UXABZ-A5WHW-M4SRW-OOBAI-A42YS-2DFJM`
				})
				// #endif
			},

			// 初始化数据
			init() {
				console.log("getToken('useNum')z", getToken('useNum'));
				this.acCompList = []
				//获取企业轮播图、轮播图数量、企业认证状态、企业更多资料
				Promise.all([
					this.queryPicList(),
					this.queryCraftsmanById(),
					this.queryNewForSlef(),
					this.queryEnterpriseContact()
				]).then(([
					res1, res2, res3, res4 = []
				]) => {
					console.log('\n\n\n\n\nres1', res1);
					if (res1 != undefined && res1.statusCode == 200) {
						this.swipList = res1.data
					}
					if (res2 != undefined && res2.craftsmanId) {
						this.useData = res2
						if (this.useData && this.useData.businessScope) {
							this.useData.businessScopeList = this.useData.businessScope.split(' ')
						}
						uni.setNavigationBarTitle({
							title: this.useData.realName
						})
					}
					if (res3 != undefined && res3.data && res3.data.code == 1) {
						this.newsList = res3.data.data
					}
					if (res4 != undefined && res4.statusCode == 200) {
						this.compData = res4.data
						this.compData && this.compData.usrCompanyList && this.compData.usrCompanyList.forEach(
							m => {
								if (m.companyId == this.useData.companyNo) {
									this.acComp = m.companyNameCn
									this.acCompList = [m]
								}
							})
					}
				})
			},
			queryNewForSlef() {
				return queryNewForSlef({
					craftsmanId: getToken('useNum')
				})
			},
			//公司信息
			queryEnterpriseContact() {
				return queryEnterpriseContact({
					userId: getToken('useNum'),
					craftsmanId: getToken('useNum')
				})
			},
			//查找轮播图
			queryPicList() {
				if (this.craftsmanId)
					return queryPicList({
						craftsmanId: this.craftsmanId,
						moduleNo: 'ydylAppUsr001',
						state: 1,
						owner: this.craftsmanId
					})
			},
			queryCraftsmanById() {
				return this.$store.dispatch('queryCraftsmanById', {
					userId: this.craftsmanId,
					isShare: this.isShare
				})
			},
			changeSwiper(e) {
				this.currSwiper = e.detail.current
			},
			toUrl(url, type) {
				if (type) {
					uni.navigateTo({
						url: `/pages/indexSub/busicardSharing?useId=${this.craftsmanId}`
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		width: 750rpx;
		position: relative;
		background: linear-gradient(180deg, rgba(78, 156, 230, 1) 0%, rgba(247, 248, 252, 1) 50%);
	}

	.huFamily {
		font-family: '胡晓波男神体';
		font-weight: 300;
	}

	.pingFamily {
		font-family: PingFangSC-Semibold;
	}

	.monMontserrat {
		font-family: Montserrat;
	}

	.searchBox {
		height: 82rpx;
		border-radius: 44rpx;
		align-items: center;

		.sText {
			height: 74rpx;
			color: white;
		}

		.searchtext {
			margin-left: 26rpx;
			font-size: 48rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 32rpx;
	}

	// 轮播图
	.swiper-box {
		position: relative;
		width: 680rpx;
		height: 200rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;

		.swiper-img {
			width: 750rpx;
			height: 200rpx;
			border-radius: 30rpx;
		}
	}

	.sendCard {
		color: white;
		width: 680rpx;
		height: 98rpx;
		background-color: #1DA9FE;
	}

	.sendCard2 {
		color: white;
		flex: 1;
		height: 98rpx;
		background-color: #1DA9FE;
	}

	.partCard {
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		.card-box {
			width: 690rpx;
			min-height: 380rpx;
			background-color: white;
			background-size: cover;
			padding: 0rpx 56rpx 20rpx 52rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;
			position: relative;
			border-radius: 60rpx;

			.card-line {
				position: absolute;
				top: 190rpx;
				right: 0rpx;
				width: 16rpx;
				background-color: #1DA9FF;
				height: 77rpx;
			}

			.quan {
				width: 99rpx;
				height: 119rpx;
				background-color: #F7FCFF;
				color: #E8F4FC;
				font-family: Limelight;
				font-size: 72rpx;
				font-weight: 400;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
			}
		}

		.ctop-info {
			display: flex;
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #1DA9FF;
			align-items: center;
			line-height: 48rpx;
		}

		.ctop-info-text2 {
			font-size: 24rpx;
			margin-left: 20rpx;
			line-height: 23rpx;
			border-radius: 18rpx;
			padding: 6rpx 14rpx;
			border: 1rpx solid rgba(29, 169, 255, 1);
		}

		.tip-comp {
			font-size: 36rpx;
			font-weight: 300;
			color: #141414;
			line-height: 49rpx;
			margin: 30rpx 0;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			width: 460rpx;
			display: block;
		}

		.c-bom {
			position: relative;
			display: flex;
			flex-direction: column;
			margin-top: 44rpx;
			width: 380rpx;

			.c-bom-phone {
				font-size: 60rpx;
				font-weight: 300;
			}

			.c-bom-email {
				display: flex;
				align-items: center;
				margin-top: 46rpx;
				font-size: 30rpx;
				font-weight: 400;

				.icImag {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.bootmText {
				width: 400rpx;
				margin-left: 130rpx;
				margin-top: 49rpx;
				font-size: 28rpx;
				font-weight: 300;
				color: #999999;
			}

			.bootmCode {
				width: 220rpx;
				height: 220rpx;
				margin-left: 180rpx;
				margin-top: 59rpx;
			}

			.openText {
				margin-left: 200rpx;
				margin-top: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.logo-box,
	.logo-box2 {
		position: absolute;
	}

	.logo-box2 {
		bottom: 30rpx;
		right: 40rpx;
	}

	.logo-box {
		top: 87rpx;
		right: 52rpx;
		width: 104rpx;
		height: 104rpx;
		border-radius: 50rpx;
		border: 2rpx solid rgba(29, 169, 255, 1);
		// .logo-img{
		// 	width: 100%;
		// 	height: 100%;
		// }
	}

	.logo-img {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
	}

	.carddate {
		width: 680rpx;
		background-color: white;
		border-radius: 64rpx;
	}

	// 推荐文章
	.part5 {
		width: 680rpx;
		margin-top: 65rpx;
		// box-shadow: 7rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		// padding: 0 34rpx;
		box-sizing: border-box;

		.part5-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.top-info {
			display: flex;
			align-items: center;
		}

		.tinfo-img {
			width: 12rpx;
			height: 21rpx;
		}

		.tinfo-more {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 12rpx;
			line-height: 130rpx;
		}

		.part5-item {
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.part5-img {
			width: 160rpx;
			height: 120rpx;
			border-radius: 16rpx;
		}

		.part5-info {
			flex: 1;
			margin-right: 20rpx;
			min-height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.info-title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			width: 384rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.bom-box {
			color: #ADACAC;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}
</style>